<template>
    <div class="swiper-container" id="swiperIndex">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in banners" :key="index">
                <a :href="item.link">
                    <img :src="item.image" alt=""  @load="swiperImageLoad">
                </a>
            </div>
<!--轮播图选项循环之后往这里放-->
<!--            <slot></slot>-->
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
import "swiper/css/swiper.css";
import Swiper from 'swiper'
export default {
    name: "SwiperArea",
    props:{
        banners:{
            type:Array,
            default:function (){
                return []
            }
        }
    },
    data(){
        return{
            isLoad:false
        }
    },
    methods:{
        swiperImageLoad(){
            if(!this.isLoad){
                this.$emit('swiperImageLoad')
                this.isLoad=!this.isLoad
            }
        }
    },
    created() {
        new Swiper(".swiper-container",{
            loop:true,
            mousewheel:true,
            keyboard:true,
            autoplay:{},
            //关于左右按钮的设置
            navigation:{
                nextEl:".swiper-button-next",
                prevEl:".swiper-button-prev"
            },
            //分页设置
            pagination:{
                el:".swiper-pagination",
                clickable:true
            }
        })
    },
    watch:{
        banners:{
            immediate:true,
            handler(){
                this.$nextTick(
                    function (){
                        new Swiper(".swiper-container",{
                            loop:true,
                            mousewheel:true,
                            keyboard:true,
                            autoplay:{},
                            //关于左右按钮的设置
                            // navigation:{
                            //     nextEl:".swiper-button-next",
                            //     prevEl:".swiper-button-prev"
                           // },
                            //分页设置
                            pagination:{
                                el:".swiper-pagination",
                                clickable:true
                            },
                        })
                    }
                )
            }
        }
    }
    }
</script>

<style scoped>
img{
   height:13rem;
   width: 100%;
}
</style>
